---
title: Partage d'état entre composants Astro
description: Apprendre à partager des états entre composants Astro avec Nano Stores.
i18nReady: true
type: recipe

---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

:::tip
Vous utilisez des composants de Framework? Voir [comment partager l'état entre les îles](/fr/recipes/sharing-state-islands/)!
:::

Lors de la création d'un site web Astro, il se peut que vous deviez partager l'état des composants. Astro recommande l'utilisation de [Nano Stores](https://github.com/nanostores/nanostores) pour le stockage partagé des clients.

## Méthode

1. Installer Nano Stores:

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm install nanostores
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm add nanostores
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn add nanostores
    ```
    </Fragment>
  </PackageManagerTabs>

2. Créez un store. Dans cet exemple, le store indique si un dialogue est ouvert ou non :

  ```ts title="src/store.js"
  import { atom } from 'nanostores';

  export const isOpen = atom(false);
  ```

3. Importez et utilisez le store dans une balise `<script>` dans les composants qui partageront l'état.

Les composants `Button` et `Dialog` suivants utilisent chacun l'état partagé `isOpen` pour contrôler si une `<div>` particulière est cachée ou affichée :

  ```astro title="src/components/Button.astro"
  <button id="openDialog">Ouvert</button>

  <script>
    import { isOpen } from '../store.js';
    
    // Définir le magasin à true lorsque le bouton est cliqué
    function openDialog() {
      isOpen.set(true);
    }

    // Ajouter un écouteur d'événement au bouton
    document.getElementById('openDialog').addEventListener('click', openDialog);
  </script>
  ```

  ```astro title="src/components/Dialog.astro"
  <div id="dialog" style="display: hidden">Hello world!</div>

  <script>
    import { isOpen } from '../store.js';

    // Écouter les changements dans le store et affiche/masque le dialogue en conséquence    
    isOpen.subscribe(open => {
      if (open) {
        document.getElementById('dialog').style.display = 'block';
      } else {
        document.getElementById('dialog').style.display = 'none';
      }
    })
  </script>
  ```

## Resources

- [Nano Stores sur NPM](https://www.npmjs.com/package/nanostores)
- [Documentation Nano Stores pour Vanilla JS](https://github.com/nanostores/nanostores#vanilla-js)